<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 合同领用
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button
                    type="primary"
                    icon="el-icon-add"
                    class="handle-del mr10"
                    @click="handleEdit('add')"
                >用章记录</el-button>
                <!--                时间段、指定年月、合同类型、律师姓名查询合同领用记录（含注销的合同）-->
                <el-date-picker
                    v-model="query.datePink"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch" style='margin-left:10px'>搜索</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"

            >
                <el-table-column type="selection" width="70" align="center"></el-table-column>
                <el-table-column prop="usageId" label="用章编号" align="center"></el-table-column>
                <el-table-column prop="userName" label="用章人"></el-table-column>
                <el-table-column prop="usageReason" label="用章事由"></el-table-column>
                <el-table-column prop="usageDate" label="用章日期"></el-table-column>
                <el-table-column prop="operator" label="经办人"></el-table-column>
                <el-table-column prop="userSignature" label="用章人签字"></el-table-column>
                <el-table-column label="合同操作" width="240" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEdit('edit', scope.row)"
                        >编辑</el-button>

<!--                        <el-button-->
<!--                            type="text"-->
<!--                            icon="el-icon-delete"-->
<!--                            class="red"-->
<!--                            @click="handleDelete(scope.$index, scope.row)"-->
<!--                        >删除</el-button>-->
                    </template>
                </el-table-column>

            </el-table>


            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="title" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px">
                <el-form-item label="用章ID" prop='usageId'>
                    <el-input v-model="form.usageId"></el-input>
                </el-form-item>
                <el-form-item label="用章人" prop='userName'>
                    <el-input v-model="form.userName"></el-input>
                </el-form-item>
                <el-form-item label="用章事由" prop='usageReason'>
                    <el-input v-model="form.usageReason"></el-input>
                </el-form-item>
                <el-form-item label="经办人" >
                    <el-input v-model='form.operator'></el-input>
                </el-form-item>
                <el-form-item label="用章日期" prop='usageDate'>
                    <el-date-picker
                        v-model="form.usageDate"
                        value-format='yyyy-MM-dd'
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="签名" prop='userSignature'>
                    <el-input v-model="form.userSignature"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <!--        注销弹出框-->
        <el-dialog title="删除" :visible.sync="dialogFormVisible" width='280px'>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="cancel(form)">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { delUser } from '@/api/user';

let user = JSON.parse(localStorage.getItem('ms_username'));
import {getSealsByCondition} from "../../api/seal"
import { editSeal } from '../../api/seal';
import { addSeal } from '../../api/seal';
export default {
    name: 'Seal',
    data() {
        return {
            date:"",
            cancelOrNo:"",
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },

            claimDate:'',
            cancellationDate:'',
            /*条件查询*/
            query: {
                datePink: [],
                beginTime:'',
                endTime:'',
                page: 1,
                pageSize: 10
            },


            tableData: [],//查询的表格数据
            pageTotal: 0,//总条数



            multipleSelection: [],//复选框选中的数据
            delList: [], //批量删除的ids


            dialogFormVisible:false,
            editVisible: false, //对话框显示不显示
            form: {
                operator:user.userName,
            },//提交表单后数据放在form里，添加或修改的表单数据

            title:"编辑",
            rules:{
                usageId: [
                    { required: true, message: '用章编号不能为空', trigger: 'blur' }
                ],
                userName: [
                    { required: true, message: '用章人不能为空', trigger: 'blur' }
                ],
                usageReason: [
                    { required: true, message: '请填写事由', trigger: 'blur' }
                ],
                usageDate: [
                    { required: true, message: '时间不能为空', trigger: 'blur' },
                ],
                userSignature: [
                    { required: true, message: '请签名', trigger: 'blur' }
                ]
            },


            idx: -1,//弹框时告诉修改/删除第几行
            id: -1
        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        getData() {
            if(this.query.datePink!=null){
                this.query.beginTime = this.query.datePink[0]
                this.query.endTime = this.query.datePink[1]
                this.query.datePink=null;
            }

            getSealsByCondition(this.query).then(res=>{
                console.log(res);
                if(res.code == 200) {
                    this.tableData = res.data;
                    this.pageTotal = res.pageTotal || 50;
                }
                else {
                    this.$message.error(res.msg);
                }

            })
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.getData();
        },
        // 注销操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(()=>{
                        // alert(row.userId)
                        del([row.phoneNumber]).then((res) => {
                            console.log(res);
                            if(res.code==200){
                                this.$message.success('删除成功');
                                this.getData();
                            }
                            else{
                                this.$message.error('删除失败');
                            }
                        })
                    }

                )
                .catch(() => {});
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 编辑操作
        handleEdit(ope, row) {
            if(ope === 'edit') {
                this.title = "编辑";
                this.form = { ...row };
            }else if(ope==='add'){
                this.title = "添加"
                this.form = {}
                this.form.operator = user.userName
            }

            this.editVisible = true;


        },
        // 保存编辑
        saveEdit() {
            this.$refs.form.validate(valid => {
                if(valid) {
                    if(this.title == '编辑') {
                        editSeal(this.form).then(res=>{
                            if(res.code==200) {
                                this.$message.success("修改成功")
                                this.editVisible = false;
                                this.getData();
                            }else {
                                this.$message.error("修改失败")
                            }

                        })
                    }else{//添加
                        console.log("form：",this.form);
                        addSeal(this.form).then(res=>{
                            if(res.code==200) {
                                this.$message.success("添加成功")
                                this.editVisible = false;
                                this.getData();
                            }else {
                                this.$message.error("添加失败")
                            }
                        })
                    }
                }else{
                    this.$message.error('请输入正确的信息')
                    return false;
                }
            })
            // this.editVisible = false;
            // this.$message.success(`修改第 ${this.idx + 1} 行成功`);
            // this.$set(this.tableData, this.idx, this.form);
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'page', val);
            this.getData();
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.export-excel-wrapper{
    display: inline-block;
    margin-left: 5px;
}
</style>
